<!--
 * @Author: MrLee
 * @Date: 2024-08-24 10:19:44
 * @LastEditors: MrLee
 * @LastEditTime: 2024-09-13 17:38:08
 * @Description: 请填写简介
-->
<template>
  <custom-navbar title="消息" :auto-back="true" left-icon-color="#303133" />
  <Tabbar :tab-list="tabList" @tab-change="tabChange" />
  <up-gap height="30rpx" />
  <view v-if="activeTab == 0 || clientType == 'enterprise'">
    <up-swipe-action>
      <up-swipe-action-item v-if="list.length > 0" v-for="(item, index) in list" :key="index" :options="item.options"
        class="job-item mb-32rpx rounded-[20rpx] bg-#ededed px-40rpx py-24rpx shadow-[0px_6px_16px_0px_rgba(191,191,191,0.26)]">
        <view :class="index == 0 ? 'bg-#ededed' : 'bg-#fff'" class="flex items-start px-40rpx py-24rpx"
          @click="getMessage(item)">
          <view class="relative mr-[20rpx]">
            <image src="https://yiliao.test03.qcw800.com/static/images/tab/user-01.png"
              class="rigth-0 absolute bottom-[5rpx] block h-[20rpx] w-[20rpx]" style="right: 0" />
            <image class="h-72rpx w-72rpx rounded-[50%]" :src="item.userProfile.avatar" />
          </view>
          <view class="flex flex-col justify-center">
            <view class="mb-4rpx flex items-center justify-between">
              <view class="text-left text-[32rpx] text-[#1d2129]">
                {{ item.userProfile.nick }}
              </view>
            </view>
            <view class="flex flex-col items-end text-left text-[26rpx] text-[#6e6d72]">
              {{item.lastMessage.payload.text}}
              <!--              <view-->
              <!--                v-for="(itemTab, indexTab) in item.tabs"-->
              <!--                :key="indexTab"-->
              <!--                class="flex flex-col items-center justify-center"-->
              <!--              >-->
              <!--                <view-->
              <!--                  :class="itemTab.className"-->
              <!--                  class="text-[24rpx] font-medium"-->
              <!--                >-->
              <!--                </view>-->
              <!--              </view>-->
            </view>
          </view>
          <view class="flex-1 text-right text-[#7b7b7b]">
            {{ item.date }}
          </view>
          <view v-if="item.unreadCount!==0" class=""
            style="background: red;width: 10rpx;height: 10rpx;border-radius: 50%;"></view>
        </view>
      </up-swipe-action-item>
    </up-swipe-action>
  </view>
  <view v-else class="px-24rpx">
    <view class="rounded-[20rpx] bg-#fff px-22rpx shadow-[0px_6px_16px_0px_rgba(191,191,191,0.12)]">
      <view class="flex py-22rpx" style="border-bottom: 1px solid #ebebeb">
        <view class="relative mr-16rpx h-42rpx w-42rpx">
          <view class="absolute right-0 top-0 h-16rpx w-16rpx rounded-50% bg-#ff0000" />
          <image class="block h-100% w-100%" src="https://yiliao.test03.qcw800.com/static/images/tab/message-01.png" />
        </view>
        <view class="text-[30rpx] text-[#1d2129] font-medium">
          系统消息
        </view>
      </view>
      <view class="py-26rpx">
        <view class="mb-24rpx text-[26rpx] text-[#1d2129]">
          注册成功
        </view>
        <view class="text-[24rpx] text-[#7b7b7b]">
          2023.12.12 12:22
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import Tabbar from '@/pages/components/tabbar/index.vue';
  import Tim from '@/utils/ImSocket/index'
  import { getTimDataApi } from "@/api/user";

  // import userCatch01 from '@/static/images/tab/user-header.png';
  import { useUserStore } from '@/store';
  import { userChat } from "@/api/user/common";
  import { userTalkING, userTalkLike, userTalkNew } from "@/api/user/customer";
  import * as os from "os";
  const userCatch01 = "https://yiliao.test03.qcw800.com/static/images/tab/user-header.png";
  const tabList = ref(null);
  const userTabList = reactive([
    { name: '招聘消息', activeLineWidth: '144' },
    { name: '系统消息', activeLineWidth: '144' },
  ]);
  const enterpriseTabList = reactive([
    { name: '新招呼', activeLineWidth: 36 * 3 },
    { name: '沟通中', activeLineWidth: 36 * 3 },
    { name: '感兴趣', activeLineWidth: 36 * 3 },
    { name: '已忽略', activeLineWidth: 36 * 3 },
  ]);

  type ClientType = 'customer' | 'enterprise';

  const { clientType } = useUserStore();
  if (clientType.value === 'customer') {
    tabList.value = userTabList;
  }
  else {
    tabList.value = enterpriseTabList;
  }

  let list : Array<any> = ref([])

  const getMessage = (item) => {
    console.log(item)
    let userID = item.userProfile.userID
    uni.navigateTo({
      url: '/pages/tab/message/details/index?userID=' + userID,
    })
  }
  const activeTab = ref(0);
  const tabChange = (e) => {
    activeTab.value = e.index;
    console.log('数据信息', e.index)
    getList()
  };
  const getList = () => {
    Tim.getConversationListNotice()
    getImList()

    //用户-聊天列表测试
    // if(activeTab.value === 0) {
    //   list.value = await userTalkNew()
    // }else if (activeTab.value === 1) {
    //   list.value = await userTalkING()
    // }else if(activeTab.value === 2) {
    //   list.value = await userTalkLike()
    //   await getImList()
    // }else {
    //   list.value = await userChat(10, 41)
    //   await getImList()
    // }
  }
  const getImList = () => {
    Tim.getAllConversationList().then(res => {
      list.value = res
      console.log('-=-==-=-=-', res)
    })
  }
  onShow(() => {
    const { globalData } = getApp();
    globalData!.initTabbar(uni.$u.pages(), 2);
    getList()
    getImList()
  });
</script>
